import React from 'react';
import { connect } from 'react-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import './index.scss';

class CardTitle extends React.PureComponent {
  render() {
    const borderColor = this.props.borderTopColor ? this.props.borderTopColor : '#f8fafa';
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    return (
      <div className={`${isVertical ? 'v-' : ''}card-title-style  ${this.props.className}`}>
        <div className="card-body">
          <span className="title-text">{this.props.text}</span>
          <div className="card-body-triangle" style={{ borderTopColor: borderColor }}>{}</div>
        </div>
        <div className="card-line">
          {}
          <div className="card-parallelogram-4">{}</div>
          <div className="card-parallelogram-3">{}</div>
          <div className="card-parallelogram-2">{}</div>
          <div className="card-parallelogram-1">{}</div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.webReducer
  };
}

export default connect(mapStateToProps)(CardTitle);
